<template>
  <div class="practice-container">
    <!-- 左侧答题卡 -->
    <el-row :gutter="20" style="height: 100%;">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6" class="col-class">
        <div class="answer-sheet">
          <div class="answer-sheet-header">
            <h3>答题卡</h3>
            <div class="status-legend">
              <div class="legend-item">
                <span class="status-indicator unanswered"></span> 未答题
              </div>
              <div class="legend-item">
                <span class="status-indicator correct"></span> 正确
              </div>
              <div class="legend-item">
                <span class="status-indicator incorrect"></span> 错误
              </div>
            </div>
          </div>
          <div class="answer-sheet-content">
            <div v-for="(group, groupIndex) in groupedQuestions" :key="groupIndex" class="question-group">
              <div class="group-title">{{ group.title }}</div>
              <div class="group-buttons">
                <div
                    v-for="(item, index) in group.questions"
                    :key="index"
                    class="question-button-wrap"
                    @click="jumpToQuestion(item.question.id)"
                >
                  <el-button
                      :class="['answer-sheet-item', { answered: item.isAnswer !== null, correct: item.isCorrect, incorrect: !item.isCorrect && item.isShowAnswer }]"
                  >
                    {{ index + 1 }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧答题区 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18" class="col-class">
        <div class="right-area">
          <div class="info-bar">
            <div class="info-item">
              <strong>题库名称：</strong>{{ questionBankName }}
            </div>
          </div>
          <div class="question-area">
            <div class="question-header">
              <h3>题目 {{ currentQuestionIndex + 1 }} / {{ questionList.length }}</h3>
            </div>
            <div class="question-content">
              <!-- 检查是否有题目 -->
              <template v-if="currentQuestionValue">
                <div class="question-title">题目：</div>
                <div v-html="currentQuestionValue.question.content"></div>
                <template v-if="currentQuestionValue.question.questionType === 'single'">
                  <div class="question-options-title">选项：</div>
                  <el-radio-group v-model="currentQuestionValue.userAnswer">
                    <el-radio
                        v-for="(option, optionIndex) in currentQuestionValue.question.options"
                        :key="optionIndex"
                        :label="option.key"
                        class="question-option"
                    >
                      <span>{{ option.key }}. </span>
                      <span v-html="option.value"></span>
                    </el-radio>
                  </el-radio-group>
                </template>
                <template v-else-if="currentQuestionValue.question.questionType === 'multiple'">
                  <div class="question-options-title">选项：</div>
                  <el-checkbox-group v-model="currentQuestionValue.userAnswer">
                    <el-checkbox
                        v-for="(option, optionIndex) in currentQuestionValue.question.options"
                        :key="option.key"
                        :label="option.key"
                        class="question-option"
                    >
                      <span>{{ option.key }}. </span>
                      <span v-html="option.value"></span>
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
                <template v-else-if="currentQuestionValue.question.questionType === 'judgment'">
                  <div class="question-options-title">请选择：</div>
                  <el-radio-group v-model="currentQuestionValue.userAnswer">
                    <el-radio label="A">正确</el-radio>
                    <el-radio label="B">错误</el-radio>
                  </el-radio-group>
                </template>
                <template v-else-if="currentQuestionValue.question.questionType === 'fill'">
                  <div class="question-options-title">请填写答案：</div>
                  <el-input type="textarea" v-model="currentQuestionValue.userAnswer"></el-input>
                </template>
                <template v-else-if="currentQuestionValue.question.questionType === 'essay'">
                  <div class="question-options-title">请简答：</div>
                  <rich-text-editor v-model:get-html="currentQuestionValue.userAnswer" height="200px"/>
                </template>
                <div v-if="currentQuestionValue.isShowAnswer" class="result-section">
                  <div :class="['result-status', currentQuestionValue.isCorrect ? 'correct' : 'incorrect']">
                    {{ currentQuestionValue.isCorrect ? '回答正确' : '回答错误' }}
                  </div>
                  <div class="result-answer">
                    <strong>正确答案：</strong>{{ currentQuestionValue.question.answer }}
                  </div>
                  <div class="result-analysis">
                    <strong>解析：</strong><span v-html="currentQuestionValue.question.explanation"></span>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="no-question-message">暂无题目，请稍后重试。</div>
              </template>
            </div>
          </div>
          <div class="operation-area">
            <el-button @click="prevQuestion" :disabled="currentQuestionIndex === 0 || !currentQuestionValue">上一题</el-button>
            <el-button @click="nextQuestion" :disabled="currentQuestionIndex === questionList.length - 1 || !currentQuestionValue">下一题</el-button>
            <el-button type="primary" @click="submitAnswer" :disabled="!currentQuestionValue">提交答案</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {ref, computed, onBeforeMount} from 'vue';
import {checkPracticeResult, initBankQustionList} from "@/api/question/bank.js";
import RichTextEditor from "@/components/RichTextEditor.vue";
// 数据定义
const questionBankName = ref("在线练习题库");
const currentQuestionIndex = ref(0);
const questionList = ref([]);

// 初始化数据
// 初始化数据
const initQuestionList = async () => {
  try {
    const res = await initBankQustionList(1); // 假设传入参数为题库 ID
    questionList.value = res.data.map(q => ({
      ...q,
      isCorrect: false,
      isShowAnswer: false,
      userAnswer: q.question.questionType === "multiple" ? [] : null // 根据题型初始化 userAnswer
    }));
    if (questionList.value.length > 0) {
      currentQuestionIndex.value = 0; // 确保默认显示第一题
    }
  } catch (error) {
    console.error("加载题库失败：", error);
  }
};


// 计算属性
const currentQuestionValue = computed(() => {
  if (questionList.value.length === 0) return null;
  return questionList.value[currentQuestionIndex.value] || null;
});
const groupedQuestions = computed(() => [{ title: "所有题目", questions: questionList.value }]);

// 方法定义
const jumpToQuestion = (id) => {
  const index = questionList.value.findIndex(q => q.question.id === id);
  if (index !== -1) {
    currentQuestionIndex.value = index;
  }
};

const prevQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--;
  }
};

const nextQuestion = () => {
  if (currentQuestionIndex.value < questionList.value.length - 1) {
    currentQuestionIndex.value++;
  }
};

const saveAnswer = () => {
  const currentQuestion = currentQuestionValue.value;
  currentQuestion.userAnswer = currentQuestion.userAnswer || null;
};

const submitAnswer = async () => {
  const currentQuestion = currentQuestionValue.value;
  currentQuestion.isShowAnswer = true;
  let userAnswerResult = ''
  if (currentQuestion.question.questionType === "multiple") {
    const userAnswers = Array.isArray(currentQuestion.userAnswer)
        ? currentQuestion.userAnswer.sort()
        : [];
    //将userAnswers转换为字符串
    userAnswerResult = userAnswers.join(',')
  } else {
    userAnswerResult = currentQuestion.userAnswer;
  }
  const data = {bankId: 1, questionId: currentQuestion.question.id, userAnswer: userAnswerResult}

  const res = await checkPracticeResult(data)

  currentQuestion.isShowAnswer=true
  currentQuestion.question.explanation=res.data.explanation
  currentQuestion.question.answer=res.data.answer
  currentQuestion.isCorrect=res.data.isCorrect
};

const getStatusClass = (item) => {
  if (item.isShowAnswer) {
    return item.isCorrect ? "correct" : "incorrect";
  }
  return item.userAnswer !== null ? "answered" : "unanswered";
};

// 在组件挂载时初始化数据
onBeforeMount(() => {
  initQuestionList();
  console.log(currentQuestionValue)
});
</script>

<style scoped>
/* 样式保持不变 */
.practice-container {
  width: 100%;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.col-class {
  height: 100%;
}

.practice-container {
  width: 100%;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.col-class {
  height: 100%;
}

/* 答题卡区域 */
.answer-sheet {
  height: 792px;
  overflow-y: auto;
  padding: 20px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.answer-sheet-header {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.status-legend {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.status-indicator {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}

.unanswered {
  background-color: #eaeaea; /* 未答题的颜色 */
}


.correct {
  background-color: #67c23a; /* 正确的颜色 */
}

.incorrect {
  background-color: #f56c6c; /* 错误的颜色 */
}

.question-group {
  margin-bottom: 20px;
}

.group-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.group-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(45px, 1fr));
  gap: 20px;
}

.question-button-wrap {
  display: flex;
  align-items: center;
}

.answer-sheet-item {
  padding: 5px;
  border: none;
  width: 40px;
  height: 40px;
  background-color: #eaeaea;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.answer-sheet-item:hover {
  background-color: #dcdcdc;
}

.answer-sheet-item.answered {
  background-color: #67c23a;
  color: white;
}

.answer-sheet-item.correct {
  background-color: #67c23a;
  color: white;
}

.answer-sheet-item.incorrect {
  background-color: #f56c6c;
  color: white;
}

/* 右侧答题区 */
.right-area {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.info-bar {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.question-area {
  overflow-y: auto;
  height: 570px;
  padding: 20px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.question-header {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}

.question-content {
  padding: 20px;
}

.question-title {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.question-options-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.question-option {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.result-section {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.result-status {
  font-size: 16px;
  font-weight: bold;
}

.result-status.correct {
  color: #67c23a;
}

.result-status.incorrect {
  color: #f56c6c;
}

.result-answer, .result-analysis {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

.operation-area {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: right;
}

.el-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
}
</style>